<template>
    <div>
    <h3>新增团队信息</h3>
    <hr>
    <div class="title">团队信息</div>
    
  <div id="main">
    
    <el-form :inline="true" :model="jg" >
    <div class="top">
      <el-form-item label="机构编号:" >
      <el-input v-model="jg.id"  disabled/>
    </el-form-item>
    <el-form-item label="机构名称:" >
      <el-input v-model="jg.name" placeholder="请输入" />
    </el-form-item>
   <div class="imgs">
    <el-form-item label="机构图片:" >
      <el-upload
          class="avatar-uploader"
          action="http://quanzhan.site:5945/api/v1/admin/files"
          :headers="headers"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
    </el-form-item>
</div>
<div>
    <span>所属机构:</span>
<el-select v-model="options.label" placeholder="请选择" >
   
   <el-option
     v-for="item in options"
     :key="item.value"
     :label="item.label"
     :value="item.value"
   />
 </el-select>
</div>
<div class="rs">
    <span>团队标签:</span>
<el-select v-model="optionss.label" placeholder="请选择" >
   
   <el-option
     v-for="item in optionss"
     :key="item.value"
     :label="item.label"
     :value="item.value"
   />
 </el-select>
</div>
  </div>
  <hr>
<div class="chengyuan">
  <span>团队成员(1)</span>
  <div class="box">
<div class="up">
  <img src="./dd.png">
  <div class="ri">
    <div class="name">
    <span>李明明</span>
    <span>全科医师</span>
  </div>
  <div class="qyue">签约人数:50</div>
  <div class="bq">
    <div class="gxy">高血压</div>
    <div class="hl">老年护理</div>
  </div>
  </div>
</div>
<hr>
<div class="down"> 
<button>医师详情</button>
</div>
  </div>
</div>

<div class="fuw">
  <span>服务包(1)</span>
  <div class="box">
<div class="up">
  <img src="./dd.png">
  <div class="ri">
    <div class="name">
    <span>基础包</span>
  </div>
  <div class="qyue">服务对象:所有人</div>
  <div class="bq">
    <div class="gxy">随访服务</div>
    <div class="hl">常规护理</div>
  </div>
  </div>
</div>
<hr>
<div class="down"> 
<button>服务包详情详情</button>
</div>
  </div>
</div>
</el-form>
</div>


<hr>
<div id="foot">
  <el-button type="primary" size="large">保存</el-button>
  <el-button type="primary" size="large">返回</el-button>
</div>

</div>
    
</template>


<script>
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
export default {
  components: {
    Plus,
  },
    data() {
        return {
            jg:{
                id:'202201',
                name:'',
                img:'',
                use:'',
                phone:'',
                adress:'',
                cont:'',
            },
            imageUrl: '',
            options:[
            {
    value: 'Option1',
    label: '洛西社区卫生服务站',
  },
  {
    value: 'Option2',
    label: '比翠园社区卫生服务站',
  },
  {
    value: 'Option3',
    label: '科信社区卫生服务站',
  },
  {
    value: 'Option4',
    label: '墅湖社区卫生服务站',
  },
    ],
    optionss:[
            {
    value: 'Option1',
    label: '全选',
  },
  {
    value: 'Option2',
    label: '慢病护理',
  },
  {
    value: 'Option3',
    label: '高血压',
  },
  {
    value: 'Option4',
    label: '高血糖',
  },
    ],
        }
    },
    computed:{
    headers(){
      return{
        Authorization:'Bearer '+this.$store.getters.token
      }
    }
  },
    methods: {
      beforeAvatarUpload (rawFile){
      if (rawFile.type !== 'image/jpeg') { // 格式
        ElMessage.error('只能上传jpg格式的图片!')
        return false
      }
      if (rawFile.size / 1024 / 1024 > 2) { // 大小
        ElMessage.error('文件大小不能超过2MB!')
        return false
      }
      return true
    },

    /**
     * 文件上传成功
     */
     handleAvatarSuccess(response, uploadFile) {
      console.log('response:', response)
      this.user.avatarUrl = response.data.file
      this.imageUrl = URL.createObjectURL(uploadFile.raw)
    }
    },
}
</script>
<style>
.title{
    width: 80px;
    height: 20px;
  
    position: relative;
    left: 0px;
    top: 0px;
}
#main{
  width: 1000px;
  height: 800px;
  display: flex;
  justify-content: center;
  align-content: center;
}

#main .top{
  width: 1000px;
  height: 200px;
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.imgs{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 150px;
  vertical-align:center;
}
#main .as{
  width: 320px;
}
#foot{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.avatar-uploader .avatar {
  width: 50px;
  height: 50px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
.rs{
    margin-left: 15px;
}
.chengyuan{
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.fuw{
  height: 250px;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.box{
  width: 350px;
  height: 200px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.box .up{
  width: 350px;
  height: 150px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.up .ri{
  width: 200px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}
.ri .name{
  width: 200px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.name span:nth-of-type(2){
  margin-left: 30px;
  font-size: 14px;
  color: #8c939d;
}
.qyue{
  font-size: 14px;
  color: #8c939d;
}
.ri .bq{
  width: 200px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.bq .gxy{
  color: red;
  background-color: #FA746B;
  width: 50px;
  height: 25px;
  border-radius: 20px;
  font-size: 12px;
  border: 0;
  opacity: 0.7;
}
.bq .hl{
  margin-left: 30px;
  color: green;
  background-color: #3DD4A7;
  width: 50px;
  height: 25px;
  border-radius: 20px;
  font-size: 12px;
  opacity: 0.7;
}
.box img{
  width: 100px;
  height: 100px;
}
.box .down{
  width: 300px;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.box button{
  width: 100px;
  height: 35px;
  color: rgb(21, 21, 21);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  background-color: white;
  border: 1px solid gray;
}
</style>